<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="1000">
    <a-button type="primary" @click="handleDeletePackage" v-auth="'slt:logisticpackagemana:delete'">删除该包裹
      <Icon icon="ant-design:delete-outlined"></Icon>
    </a-button>
    <a-timeline mode="left">
      <a-timeline-item v-for="item in taskFlowList" :label='item.time'>
        <div class="color-#f68052">{{ item.context }}</div>
      </a-timeline-item>
    </a-timeline>

  </BasicModal>
</template>

<script lang="ts" setup>
import { ref, computed, unref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { queryDetail } from '../XlCustomerLogisticPackage.api';
import { message } from 'ant-design-vue';
import {  queryTrack } from '/@/views/xl/customer_shipment/XlCustomerShipment.api';
import { detailColumns, } from '../XlCustomerLogisticPackage.data';
import {deleteOne} from '../XlCustomerLogisticPackage.api';
// Emits声明
const emit = defineEmits(['register', 'success']);
const isDetail = ref(true);

let title = ref("");           //弹窗title
const detailList = ref([]);

//流程时间轴
const taskFlowList = ref();

//处理物流数据
const handleQueryTrack = async (params) => {
  taskFlowList.value = [];
  var res = await queryTrack(params);
  if (!res?.length) {
    taskFlowList.value = [];
    message.warning('该发货单暂无快递记录')
    taskFlowList.value = "";
    return false;
  }
  taskFlowList.value = res;
  console.log('taskFlowList', taskFlowList.value);
}

let logiOrder = ref("");
let logiCom = ref("");
let orderCode = ref("");
//表单赋值
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  setModalProps({ confirmLoading: false, showCancelBtn: !!data?.showFooter, showOkBtn: !!data?.showFooter });
  logiOrder = data.record.logiOrder;
  logiCom = data.record.logiCom;
  orderCode = data.record.orderCode;
  title.value = [data.record.logiCom, "：", data.record.logiOrder].join("");
  detailList.value = [];
  if (data.record) {
    //查询物流
    handleQueryTrack({
      comp: data.record.logiCom,           //快递公司
      logisticorder: data.record.logiOrder,  //快递单号
      phone: '',
      orderCode: data.record.orderCode,
    });
  }

  // //判断是否有传递明细数据
  // if (data.detailList) {
  //   //获取明细数据
  //   detailList.value = data.detailList
  // } else {
  //   //获取明细数据
  //   detailList.value = await queryDetail({ orderCode: data.record.orderCode, logiCom: data.record.logiCom, logiOrder: data.record.logiOrder })
  // }
});

async function handleDeletePackage() {
  await deleteOne({ logiOrder: logiOrder, logiCom:logiCom,orderCode:orderCode}, closeModal);
}
</script>

<style lang="less" scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
  width: 100%;
}

:deep(.ant-calendar-picker) {
  width: 100%;
}
</style>